<template>
  <h4>{{person}}</h4>
  <h2>{{ `姓名：${name}` }}</h2>
  <h2>年龄： {{ age }}</h2>
  <h2>薪水：{{ job.j1.salary }}K</h2>
  <button type="" @click="name += '~'">修改姓名</button>
  <button type="" @click="age++">增长年龄</button>
  <button type="" @click="job.j1.salary++">涨薪</button>
</template>

<script>
import { ref,reactive ,toRefs } from "vue";
export default {
  name: "App",
  setup() {
    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        j1: {
          salary: 15,
        },
      },
    });

    // 这里用ref来定义重新创建了一个ref对象，数据和源数据无关联
    // const name1 = ref(person.name);
    // console.log("name1 :>> ", name1);

    //用toRef来创建，存在引用的关系，和源数据是双向绑定的
    // const name2 = toRef(person, "name");
    // console.log("name2 :>> ", name2);

    const x = toRefs(person)
    console.log('x :>> ', x);

    return {
      person,
      // name:toRef(person, "name"),
      // age:toRef(person,'age'),
      // salary:toRef(person.job.j1,'salary'),
      ...toRefs(person)
    };
  },
};
</script>
